<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
  </style>
<script type="text/javascript">
  window.onload = function(){
    var img1 = document.getElementById("img1");
    var start = document.getElementById("start");
    var end = document.getElementById("end");
    var timer;
    // 点击开始按钮时开始切换图片
    start.onclick = function(){
      var imgArr = ["./img/1.jpeg","./img/2.jpg","./img/3.jpg"];
      var index = 0;
      /**
       * 每点击一次按钮就会开启一个定时器
       *    点击多次就会开启多个定时器，并且每次只关闭了最后一次开启的定时器
       * 解决办法：
       *    在开启定时器前，先关闭当前元素的同一个定时器
      */
      clearInterval(timer);

      // 设置定时器切换图片
      timer = setInterval(function(){
        index++;
        index %= imgArr.length;
        img1.src = imgArr[index];
      },1000);
    }
    // 点击停止按钮时，停止切换
    end.onclick = function(){
        clearInterval(timer);
    }
  }
</script>
</head>
<body >
  <button id="start">开始</button>
  <button id="end">停止</button>
  <br>
  <img src="./img/1.jpeg" id="img1">
</body>
</html> 